<template>
    <div>
        <a-input v-if="type === 'text'" ref="input" v-model:value="searchValue" @blur="handleBlur" />
        <a-select
            v-else-if="type === 'select'"
            :get-popup-container="node => node.parentNode"
            :placeholder="请选择"
            @dropdownVisibleChange="handleDropdownVisibleChange"
            @change="handleSelectChange"
        >
            <a-select-option v-for="(item, rangeIndex) in selectOptions" :key="rangeIndex" :value="item.value">
                <svg-icon v-if="item.icon" :type="item.icon" class="svg-icon" />
                {{ item.title }}
            </a-select-option>
        </a-select>
        <a-tree-select
            v-else-if="type === 'treeSelect'"
            :tree-data="selectOptions"
            :placeholder="请选择"
            tree-default-expand-all
            @dropdownVisibleChange="handleDropdownVisibleChange"
            @change="handleSelectChange"
        />
        <a-date-picker
            v-else-if="type === 'date'"
            format="YYYY-MM-DD"
            :show-time="optionData.showTime"
            @change="handleDatePickerChange"
        />
        <a-month-picker v-else-if="type === 'month'" @change="handleDatePickerChange" />
        <a-range-picker v-else-if="type === 'dateSection'" format="YYYY-MM-DD" @change="handleDatePickerChange" />
    </div>
</template>

<script>
    import { isEmptyArr } from '@/utils/index'
    import { defineComponent, watch, ref } from 'vue'

    export default defineComponent({
        name: 'SearchComponent',
        props: {
            type: {
                type: String,
                default: 'text'
            },
            optionData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            dataSourceId: {
                type: String
            },
            fieldId: {
                type: String
            },
            getPageColumnValue: {
                type: Function
            },
            value: {
                type: Object
            }
        },
        emits: ['change'],
        setup(props, { emit }) {
            const selectOptions = ref([])
            const handleDatePickerChange = (_, dateString) => {
                emit('change', dateString)
            }
            const searchValue = ref('')
            const handleBlur = event => {
                const newValue = event.target.value
                emit('change', newValue)
            }
            const handleDropdownVisibleChange = () => {
                const param = {
                    pageId: props.dataSourceId, // 表单id
                    filter: {},
                    pageSize: 200, // 分页
                    pageNo: 1, // 分页
                    sort: {},
                    end: false,
                    field: props.fieldId // 获取的列
                }
                if (!isEmptyArr(selectOptions.value)) {
                    return
                }
                props.getPageColumnValue(param).then(res => {
                    const optionList = []
                    res.data.dataList.forEach(info => {
                        optionList.push({
                            title: info[props.fieldId],
                            value: info[props.fieldId]
                        })
                    })
                    selectOptions.value = optionList
                })
            }
            const handleSelectChange = newValue => {
                emit('change', newValue)
            }
            watch(
                () => props.value,
                newValue => {
                    searchValue.value = newValue
                }
            )
            return {
                selectOptions,
                searchValue,
                handleBlur,
                handleDatePickerChange,
                handleSelectChange,
                handleDropdownVisibleChange
            }
        }
    })
</script>
